<template>
  <d2-container class="taskmonitor">
    <template slot="header">任务监控</template>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-select size="small" v-model="activval" placeholder="任务状态">
          <el-option
            v-for="item in activlist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select size="small" v-model="auditval" placeholder="请选择">
          <el-option
            v-for="item in auditlist"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input size="small" v-model="iptval" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="9">
        <el-date-picker
          style="width:100%;"
          size="small"
          v-model="timeval"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-col>
      <el-col :span="2">
        <el-button size="mini" type="primary" @click="onSearch">查询</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      :row-key='getRowKeys'
      :expand-row-keys="expands"
      @expand-change="rowClick"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="任务类型:">
              <b style="color:red;">{{ props.row.coupon}}</b>
            </el-form-item>
            <el-form-item label="假聊:">
              <span>{{ props.row.actor }}</span>
            </el-form-item>
            <el-form-item label="浏览:">
              <span>{{ props.row.browse}}</span>
            </el-form-item>
            <el-form-item label="货比:">
              <span>{{ props.row.compare }}</span>
            </el-form-item>
            <el-form-item label="收藏:">
              <span>{{ props.row.favorites}}</span>
            </el-form-item>
            <el-form-item label="下单时间:" v-if="props.row.coupon == '隔夜单'">
              <span>{{ props.row.pay_time*1000 | moment}}</span>
            </el-form-item>
            <el-form-item label="下单方式:" v-if="props.row.coupon == '隔夜单'">
              <span>{{ props.row.orderway}}</span>
            </el-form-item>
            <el-form-item label="任务间隔时间:" v-if="props.row.coupon == '隔夜单'">
              <span>{{ props.row.intervals}}</span>
            </el-form-item>
            <el-form-item label="性别筛选:">
              <span>{{ props.row.repeat}}</span>
            </el-form-item>
            <el-form-item label="购物车:">
              <span>{{ props.row.shop_cart}}</span>
            </el-form-item>
            <el-form-item label="任务状态:">
              <span>{{ props.row.status}}</span>
            </el-form-item>
            <el-form-item label="商家提示:">
              <b style="color:red;">{{ props.row.tipsninfo}}</b>
            </el-form-item>
            <el-form-item label="任务组别:">
              <span>{{ props.row.task_group}}</span>
            </el-form-item>
            <el-form-item label="关键词:">
              <span v-for="(key,index) in props.row.key_words">关键词：<b style="color:red">{{index}}</b>　单数：<b style="color:red">{{key}}单</b><br/></span>
            </el-form-item>
            <el-form-item label="任务图片:">
              <a :href="props.row.picture_address" target="_blank"><img :src="props.row.picture_address" alt="" style="width:50px;height:50px;"/></a>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="60">
      </el-table-column>
      <el-table-column
        prop="shopname"
        label="店铺名"
        width="160">
      </el-table-column>
      <el-table-column
        prop="babyid"
        label="宝贝ID"
        width="200">
        <template slot-scope="scope">
          <a :href="'https://detail.tmall.com/item.htm?id=' + scope.row.babyid" target="_blank">
            {{scope.row.babyid}}
          </a>
        </template>
      </el-table-column>
      <el-table-column
        prop="goodsname"
        label="商品名称"
        width="250">
      </el-table-column>
      <el-table-column
        prop="price"
        label="商品价格"
        width="100">
      </el-table-column>
      <el-table-column
        prop="key_word"
        label="关键词"
        width="120">
      </el-table-column>
      <el-table-column
        prop="conducttk"
        label="进行中"
        width="100">
      </el-table-column>
      <el-table-column
        prop="overtk"
        label="已完成"
        width="100">
      </el-table-column>
      <el-table-column
        prop="issuedtk"
        label="总单数"
        width="100">
      </el-table-column>
      <el-table-column
        label="任务状态"
        width="100">
        <template slot-scope="scope">
          <span>{{scope.row.taskstatus == 1 ? '已开始' : scope.row.taskstatus == 2 ? '暂停' : '已结清'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="race_selection"
        label="筛选方式"
        width="120">
      </el-table-column>
      <el-table-column
        prop="sort_order"
        label="排序方式"
        width="120">
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        width="160">
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="total >= 20"
      @current-change="handleCurrentChange"
      :current-page.sync="page"
      :page-size="20"
      layout="total, prev, pager, next"
      :total="total"
      style="text-align:right;margin:10px 0;">
    </el-pagination>
  </d2-container>
</template>

<script>
import { monitoringlist,monitoringinfo } from '@api/sys.login'
export default {
  name: 'merchants',
  data(){
    return{
      tableData:[],
      expands:[],
      page:1,
      total:0,
      getRowKeys (row) {
        return row.id
      },
      activval:'',
      activlist:[
        {
          value: 1,
          label:'已开始',
        },
        {
          value: 2,
          label:'暂停',
        },
        {
          value: 3,
          label:'已经结清',
        }
      ],
      auditval:'',
      auditlist:[
        {
          value:'商户名',
          label:'商户名',
        },
        {
          value:'店铺名',
          label:'店铺名',
        },
        {
          value:'宝贝ID',
          label:'宝贝ID',
        }
      ],
      iptval:'',
      timeval:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  mounted(){
    let params = {
      page:this.page,
      pageSize:20
    }
    this.getUserList(params)
  },
  methods:{
    rowClick(row,expandedRows){
      console.log(row);
      if (expandedRows.length) {
        this.expands = []
        if (row) {
          this.expands.push(row.id)
        }
      } else {
        this.expands = []
      }
      monitoringinfo(row.pay_task_id).then((res)=>{
        this.$nextTick(()=>{
          this.lists = res.data
          this.tableData.forEach((item)=>{
            if(row.task_id == item.task_id){
              item.actor = this.lists.actor
              item.browse = this.lists.browse
              item.compare = this.lists.compare
              item.coupon = this.lists.coupon
              item.favorites = this.lists.favorites
              item.group = this.lists.group
              item.orderway = this.lists.orderway
              item.pay_time = this.lists.pay_time
              item.intervals = this.lists.intervals
              item.key_words = this.lists.key_word
              item.orderway = this.lists.orderway
              item.picture_address = this.lists.picture_address
              item.repeat = this.lists.repeat
              item.shop_cart = this.lists.shop_cart
              item.status = this.lists.status
              item.task_group = this.lists.task_group
              item.tipsninfo = this.lists.tipsninfo.split('+++***')[0]
            }
          })
          console.log(this.tableData);
        })
      })
    },
    handleCurrentChange(val) {
      this.page = val
      this.onSearch()
    },
    // 获取列表数据
    getUserList(params){
      monitoringlist(params)
        .then((res) => {
          console.log('任务信息',res)
          this.tableData = res.data.map((item)=>{
            this.$set(item,'actor','')
            this.$set(item,'browse','')
            this.$set(item,'compare','')
            this.$set(item,'coupon','')
            this.$set(item,'favorites','')
            this.$set(item,'group','')
            this.$set(item,'intervals','')
            this.$set(item,'orderway','')
            this.$set(item,'picture_address','')
            this.$set(item,'repeat','')
            this.$set(item,'shop_cart','')
            this.$set(item,'orderway','')
            this.$set(item,'pay_time','')
            this.$set(item,'status','')
            this.$set(item,'task_group','')
            this.$set(item,'tipsninfo','')
            this.$set(item,'key_words','')
            return item
          })
          this.total = res.count
        })
        .catch(() =>{
          this.tableData = []
          this.total = 0
        })
    },
    //查询
    onSearch(){
      if(this.timeval.length>0){
        let list = [...this.timeval]
        let index = list[1].indexOf(" ");
        list[1] = list[1].substring(0,list[1].length-index+1) + ' 23:59:59'
        this.timeval[1] = list[1]
      }
      let params = {
        page:this.page,
        pageSize:20,
        time:this.timeval,
        status:this.activval
      }
      this.auditval == '商户名' ? params.cooperation = this.iptval
      : this.auditval == '店铺名' ? params.shopname = this.iptval
      : this.auditval == '宝贝ID' ? params.link = this.iptval : ''
      this.getUserList(params)
    },
  }
}
</script>

<style lang="scss">
.taskmonitor{
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
